<template>
  <div class="center-svg">
    <svg
        id="dongxiao"
        data-name="dongxiao"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="787.781"
        height="652"
        viewBox="0 0 787.781 652"
    >
      <defs>
        <linearGradient
            id="linear-gradient"
            x1="177.891"
            y1="126.344"
            x2="177.891"
            y2="51.375"
            gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#030000"/>
          <stop offset="1" stop-color="#fff"/>
        </linearGradient>
        <linearGradient
            id="linear-gradient-2"
            x1="177.891"
            y1="110.344"
            x2="177.891"
            y2="44.719"
            xlink:href="#linear-gradient"
        />
        <linearGradient
            id="linear-gradient-3"
            x1="177.969"
            y1="90.719"
            x2="177.969"
            y2="-0.625"
            gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#26bbff"/>
          <stop offset="1" stop-color="#26bbff" stop-opacity="0"/>
        </linearGradient>
        <linearGradient
            id="linear-gradient-4"
            x1="177.969"
            y1="91.219"
            x2="177.969"
            y2="46.875"
            gradientUnits="userSpaceOnUse"
        >
          <stop offset="-0.055" stop-color="#26bbff"/>
          <stop offset="1.044" stop-color="#26bbff" stop-opacity="0"/>
          <stop offset="1.055" stop-color="#26bbff"/>
        </linearGradient>
        <linearGradient
            id="linear-gradient-5"
            x1="178.109"
            y1="87.563"
            x2="178.109"
            y2="38"
            gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#fff"/>
          <stop offset="1" stop-color="#fff" stop-opacity="0"/>
        </linearGradient>
        <linearGradient
            id="linear-gradient-6"
            x1="718.89"
            y1="414.344"
            x2="718.89"
            y2="339.375"
            xlink:href="#linear-gradient"
        />
        <linearGradient
            id="linear-gradient-7"
            x1="718.89"
            y1="398.344"
            x2="718.89"
            y2="332.719"
            xlink:href="#linear-gradient"
        />
        <linearGradient
            id="linear-gradient-8"
            x1="718.969"
            y1="378.719"
            x2="718.969"
            y2="287.375"
            xlink:href="#linear-gradient-3"
        />
        <linearGradient
            id="linear-gradient-9"
            x1="718.968"
            y1="379.219"
            x2="718.968"
            y2="334.875"
            xlink:href="#linear-gradient-4"
        />
        <linearGradient
            id="linear-gradient-10"
            x1="719.109"
            y1="375.562"
            x2="719.109"
            y2="326"
            xlink:href="#linear-gradient-5"
        />
        <linearGradient
            id="linear-gradient-11"
            x1="67.891"
            y1="325.344"
            x2="67.891"
            y2="250.375"
            xlink:href="#linear-gradient"
        />
        <linearGradient
            id="linear-gradient-12"
            x1="67.891"
            y1="309.344"
            x2="67.891"
            y2="243.719"
            xlink:href="#linear-gradient"
        />
        <linearGradient
            id="linear-gradient-13"
            x1="67.969"
            y1="289.719"
            x2="67.969"
            y2="198.375"
            xlink:href="#linear-gradient-3"
        />
        <linearGradient
            id="linear-gradient-14"
            x1="67.969"
            y1="290.219"
            x2="67.969"
            y2="245.875"
            xlink:href="#linear-gradient-4"
        />
        <linearGradient
            id="linear-gradient-15"
            x1="68.109"
            y1="286.562"
            x2="68.109"
            y2="237"
            xlink:href="#linear-gradient-5"
        />
        <linearGradient
            id="linear-gradient-16"
            x1="159.891"
            y1="596.344"
            x2="159.891"
            y2="521.375"
            xlink:href="#linear-gradient"
        />
        <linearGradient
            id="linear-gradient-17"
            x1="159.891"
            y1="580.344"
            x2="159.891"
            y2="514.719"
            xlink:href="#linear-gradient"
        />
        <linearGradient
            id="linear-gradient-18"
            x1="159.969"
            y1="560.719"
            x2="159.969"
            y2="469.375"
            xlink:href="#linear-gradient-3"
        />
        <linearGradient
            id="linear-gradient-19"
            x1="159.969"
            y1="561.219"
            x2="159.969"
            y2="516.875"
            xlink:href="#linear-gradient-4"
        />
        <linearGradient
            id="linear-gradient-20"
            x1="160.109"
            y1="557.562"
            x2="160.109"
            y2="508"
            xlink:href="#linear-gradient-5"
        />
        <linearGradient
            id="linear-gradient-21"
            x1="581.89"
            y1="623.344"
            x2="581.89"
            y2="548.375"
            xlink:href="#linear-gradient"
        />
        <linearGradient
            id="linear-gradient-22"
            x1="581.89"
            y1="607.344"
            x2="581.89"
            y2="541.719"
            xlink:href="#linear-gradient"
        />
        <linearGradient
            id="linear-gradient-23"
            x1="581.969"
            y1="587.719"
            x2="581.969"
            y2="496.375"
            xlink:href="#linear-gradient-3"
        />
        <linearGradient
            id="linear-gradient-24"
            x1="581.968"
            y1="588.219"
            x2="581.968"
            y2="543.875"
            xlink:href="#linear-gradient-4"
        />
        <linearGradient
            id="linear-gradient-25"
            x1="582.109"
            y1="584.562"
            x2="582.109"
            y2="535"
            xlink:href="#linear-gradient-5"
        />
        <linearGradient
            id="linear-gradient-26"
            x1="633.89"
            y1="145.344"
            x2="633.89"
            y2="70.375"
            xlink:href="#linear-gradient"
        />
        <linearGradient
            id="linear-gradient-27"
            x1="633.89"
            y1="129.344"
            x2="633.89"
            y2="63.719"
            xlink:href="#linear-gradient"
        />
        <linearGradient
            id="linear-gradient-28"
            x1="633.969"
            y1="109.719"
            x2="633.969"
            y2="18.375"
            xlink:href="#linear-gradient-3"
        />
        <linearGradient
            id="linear-gradient-29"
            x1="633.968"
            y1="110.219"
            x2="633.968"
            y2="65.875"
            xlink:href="#linear-gradient-4"
        />
        <linearGradient
            id="linear-gradient-30"
            x1="634.109"
            y1="106.562"
            x2="634.109"
            y2="57"
            xlink:href="#linear-gradient-5"
        />
        <linearGradient
            id="linear-gradient-31"
            x1="273.219"
            y1="315.25"
            x2="524.25"
            y2="443.156"
            gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#fbab00"/>
          <stop offset="0.342" stop-color="#f98100"/>
          <stop offset="0.75" stop-color="#f86d00" stop-opacity="0"/>
          <stop offset="1" stop-color="#f86000"/>
        </linearGradient>
        <linearGradient
            id="linear-gradient-32"
            x1="565.875"
            y1="379.485"
            x2="235.062"
            y2="379.485"
            gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#1b90ff"/>
          <stop offset="0.745" stop-color="#0752ff" stop-opacity="0"/>
          <stop offset="1" stop-color="#003dff"/>
        </linearGradient>
        <linearGradient
            id="linear-gradient-33"
            x1="628.344"
            y1="445.411"
            x2="169.406"
            y2="278.371"
            gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#fbab00"/>
          <stop offset="0.342" stop-color="#f98100"/>
          <stop offset="1" stop-color="#f86000" stop-opacity="0"/>
        </linearGradient>
        <filter
            id="filter"
            x="291"
            y="214"
            width="61"
            height="60"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>

        <!-- 蓝色点的滤镜效果 -->
        <filter
            id="blue-filter-2"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>

        <!-- 橙色的滤镜效果 -->
        <filter
            id="orange-filter-2"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#f97a00" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>


        <filter
            id="filter-2"
            x="258"
            y="155"
            width="61"
            height="61"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>
        <filter
            id="filter-3"
            x="126"
            y="296"
            width="61"
            height="61"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>
        <filter
            id="filter-4"
            x="255"
            y="269"
            width="61"
            height="61"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>
        <filter
            id="filter-5"
            x="226"
            y="510"
            width="60"
            height="61"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>
        <filter
            id="filter-6"
            x="256"
            y="452"
            width="60"
            height="60"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>
        <filter
            id="filter-7"
            x="257"
            y="407"
            width="61"
            height="61"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>
        <filter
            id="filter-8"
            x="247"
            y="83"
            width="59"
            height="59"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>
        <filter
            id="filter-9"
            x="262"
            y="122"
            width="60"
            height="59"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>
        <filter
            id="filter-10"
            x="278"
            y="199"
            width="59"
            height="60"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>
        <filter
            id="filter-11"
            x="112"
            y="294"
            width="59"
            height="59"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>
        <filter
            id="filter-12"
            x="206"
            y="274"
            width="59"
            height="59"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>
        <filter
            id="filter-13"
            x="255"
            y="436"
            width="59"
            height="60"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>
        <filter
            id="filter-14"
            x="238"
            y="500"
            width="59"
            height="59"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>
        <filter
            id="filter-15"
            x="279"
            y="364"
            width="59"
            height="59"
            filterUnits="userSpaceOnUse"
        >
          <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha"/>
          <feComposite result="composite"/>
          <feComposite result="composite-2"/>
          <feComposite result="composite-3"/>
          <feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9"/>
          <feComposite result="composite-4" operator="in" in2="composite-3"/>
          <feBlend result="blend" in2="SourceGraphic"/>
          <feBlend result="blend-2" in="SourceGraphic"/>
        </filter>
        <image
            id="image"
            width="23"
            height="23"
            xlink:href="@/assets/images/center/image-1.png"
        />
        <image
            id="image-2"
            width="15"
            height="15"
            xlink:href="@/assets/images/center/image-2.png"
        />
      </defs>
      <g id="dongxiao1">
        <g id="icon">
          <path
              id="base_o"
              class="cls-1"
              d="M177.9,51.386c33.127,0,63.736,13.839,67.114,34,3.557,21.237-26.042,40.948-67.114,40.948s-70.671-19.711-67.113-40.948C114.162,65.225,144.771,51.386,177.9,51.386Z"
          />
          <path
              id="base_t"
              class="cls-2"
              d="M177.9,44.728c33.127,0,63.736,12.114,67.114,29.76,3.557,18.59-26.042,35.844-67.114,35.844s-70.671-17.254-67.113-35.844C114.162,56.842,144.771,44.728,177.9,44.728Z"
          />
          <path
              id="right_o"
              class="cls-3"
              d="M122.484-.626H233.455L208.447,90.7H147.491Z"
          />
          <path
              id="right_t"
              class="cls-4"
              d="M112.064,46.866H243.875l-35.428,44.36H147.491Z"
          />
          <path
              id="line"
              class="cls-5"
              d="M178.105,38c25.911,0,51.58,8.076,56.087,21.076,4.881,14.075-19.143,28.5-56.083,28.5s-60.966-14.426-56.087-28.5C126.527,46.072,152.194,38,178.105,38Z"
          />
          <image
              id="icon_star_guangzhou"
              x="121"
              y="-3"
              width="112"
              height="112"
              xlink:href="@/assets/images/center/star.png"
          />
          <path
              id="base_o-2"
              data-name="base_o"
              class="cls-6"
              d="M718.9,339.386c33.127,0,63.736,13.839,67.114,34,3.557,21.237-26.042,40.948-67.114,40.948s-70.671-19.711-67.113-40.948C655.162,353.225,685.771,339.386,718.9,339.386Z"
          />
          <path
              id="base_t-2"
              data-name="base_t"
              class="cls-7"
              d="M718.9,332.728c33.127,0,63.736,12.114,67.114,29.76,3.557,18.59-26.042,35.844-67.114,35.844s-70.671-17.254-67.113-35.844C655.162,344.842,685.771,332.728,718.9,332.728Z"
          />
          <path
              id="right_o-2"
              data-name="right_o"
              class="cls-8"
              d="M663.484,287.374H774.455L749.447,378.7H688.491Z"
          />
          <path
              id="right_t-2"
              data-name="right_t"
              class="cls-9"
              d="M653.064,334.866H784.875l-35.428,44.36H688.491Z"
          />
          <path
              id="line-2"
              data-name="line"
              class="cls-10"
              d="M719.105,326c25.911,0,51.58,8.076,56.087,21.076,4.881,14.075-19.143,28.5-56.083,28.5s-60.966-14.426-56.087-28.5C667.527,334.072,693.194,326,719.105,326Z"
          />
          <image
              id="icon_location_zhongshan"
              x="666"
              y="287"
              width="106"
              height="107"
              xlink:href="@/assets/images/center/location.png"
          />
          <path
              id="base_o-3"
              data-name="base_o"
              class="cls-11"
              d="M67.9,250.386c33.127,0,63.736,13.839,67.114,34,3.557,21.237-26.042,40.948-67.114,40.948S-2.773,305.62.785,284.383C4.162,264.225,34.771,250.386,67.9,250.386Z"
          />
          <path
              id="base_t-3"
              data-name="base_t"
              class="cls-12"
              d="M67.9,243.728c33.127,0,63.736,12.114,67.114,29.76,3.557,18.59-26.042,35.844-67.114,35.844S-2.773,292.078.785,273.488C4.162,255.842,34.771,243.728,67.9,243.728Z"
          />
          <path
              id="right_o-3"
              data-name="right_o"
              class="cls-13"
              d="M12.484,198.374H123.455L98.447,289.7H37.491Z"
          />
          <path
              id="right_t-3"
              data-name="right_t"
              class="cls-14"
              d="M2.064,245.866H133.875l-35.428,44.36H37.491Z"
          />
          <path
              id="line-3"
              data-name="line"
              class="cls-15"
              d="M68.105,237c25.911,0,51.58,8.076,56.087,21.076,4.881,14.075-19.143,28.5-56.083,28.5s-60.966-14.426-56.088-28.5C16.527,245.072,42.194,237,68.105,237Z"
          />
          <image
              id="icon_pie_shenzhen"
              x="13"
              y="194"
              width="107"
              height="108"
              xlink:href="@/assets/images/center/pie.png"
          />
          <path
              id="base_o-4"
              data-name="base_o"
              class="cls-16"
              d="M159.9,521.386c33.127,0,63.736,13.839,67.114,34,3.557,21.237-26.042,40.948-67.114,40.948S89.227,576.62,92.785,555.383C96.162,535.225,126.771,521.386,159.9,521.386Z"
          />
          <path
              id="base_t-4"
              data-name="base_t"
              class="cls-17"
              d="M159.9,514.728c33.127,0,63.736,12.114,67.114,29.76,3.557,18.59-26.042,35.844-67.114,35.844s-70.671-17.254-67.113-35.844C96.162,526.842,126.771,514.728,159.9,514.728Z"
          />
          <path
              id="right_o-4"
              data-name="right_o"
              class="cls-18"
              d="M104.484,469.374H215.455L190.447,560.7H129.491Z"
          />
          <path
              id="right_t-4"
              data-name="right_t"
              class="cls-19"
              d="M94.064,516.866H225.875l-35.428,44.36H129.491Z"
          />
          <path
              id="line-4"
              data-name="line"
              class="cls-20"
              d="M160.1,508c25.911,0,51.58,8.076,56.087,21.076,4.881,14.075-19.143,28.5-56.083,28.5s-60.966-14.426-56.088-28.5C108.527,516.072,134.194,508,160.1,508Z"
          />
          <image
              id="icon_earth_dongguan"
              x="106"
              y="460"
              width="111"
              height="112"
              xlink:href="@/assets/images/center/earth.png"
          />
          <path
              id="base_o-5"
              data-name="base_o"
              class="cls-21"
              d="M581.9,548.386c33.127,0,63.736,13.839,67.114,34,3.557,21.237-26.042,40.948-67.114,40.948s-70.671-19.711-67.113-40.948C518.162,562.225,548.771,548.386,581.9,548.386Z"
          />
          <path
              id="base_t-5"
              data-name="base_t"
              class="cls-22"
              d="M581.9,541.728c33.127,0,63.736,12.114,67.114,29.76,3.557,18.59-26.042,35.844-67.114,35.844s-70.671-17.254-67.113-35.844C518.162,553.842,548.771,541.728,581.9,541.728Z"
          />
          <path
              id="right_o-5"
              data-name="right_o"
              class="cls-23"
              d="M526.484,496.374H637.455L612.447,587.7H551.491Z"
          />
          <path
              id="right_t-5"
              data-name="right_t"
              class="cls-24"
              d="M516.064,543.866H647.875l-35.428,44.36H551.491Z"
          />
          <path
              id="line-5"
              data-name="line"
              class="cls-25"
              d="M582.105,535c25.911,0,51.58,8.076,56.087,21.076,4.881,14.075-19.143,28.5-56.083,28.5s-60.966-14.426-56.087-28.5C530.527,543.072,556.194,535,582.105,535Z"
          />
          <image
              id="icon_hot_zhuhai"
              x="530"
              y="495"
              width="105"
              height="105"
              xlink:href="@/assets/images/center/hot.png"
          />
          <path
              id="base_o-6"
              data-name="base_o"
              class="cls-26"
              d="M633.9,70.386c33.127,0,63.737,13.839,67.114,34,3.557,21.237-26.042,40.948-67.114,40.948s-70.671-19.711-67.113-40.948C570.162,84.225,600.771,70.386,633.9,70.386Z"
          />
          <path
              id="base_t-6"
              data-name="base_t"
              class="cls-27"
              d="M633.9,63.728c33.127,0,63.737,12.114,67.114,29.76,3.557,18.59-26.042,35.844-67.114,35.844s-70.671-17.254-67.113-35.844C570.162,75.842,600.771,63.728,633.9,63.728Z"
          />
          <path
              id="right_o-6"
              data-name="right_o"
              class="cls-28"
              d="M578.484,18.374H689.455L664.447,109.7H603.491Z"
          />
          <path
              id="right_t-6"
              data-name="right_t"
              class="cls-29"
              d="M568.064,65.866H699.875l-35.428,44.36H603.491Z"
          />
          <path
              id="line-6"
              data-name="line"
              class="cls-30"
              d="M634.105,57c25.911,0,51.58,8.076,56.087,21.076,4.881,14.075-19.143,28.5-56.083,28.5s-60.966-14.426-56.087-28.5C582.527,65.072,608.194,57,634.105,57Z"
          />
          <image
              id="icon_home_foshan"
              x="582"
              y="17"
              width="103"
              height="103"
              xlink:href="@/assets/images/center/home.png"
          />
        </g>
        <g id="circle">
          <path
              id="white"
              class="cls-31"
              d="M414.057,225.629c96.638,0,183.089,41.729,194.7,100.322C621.763,391.613,533.734,450,417.167,450c-116.623,0-206.208-58.413-195.026-124.044C232.116,267.4,317.339,225.629,414.057,225.629Z"
          />
          <path
              id="orange_2"
              class="cls-32"
              d="M397.666,306.9c63.817,0,120.7,28.166,126.181,67.065,5.811,41.258-50.026,77.528-124.026,77.528-74.041,0-130.915-36.294-126.336-77.528C277.8,335.086,333.819,306.9,397.666,306.9Z"
          />
          <path
              id="blue"
              class="cls-33"
              d="M399.082,284.02c82.745,0,156.818,36,165.9,86.375,10,55.486-64.543,104.544-163.1,104.544-98.607,0-174.539-49.087-166.169-104.544C243.317,320.056,316.275,284.02,399.082,284.02Z"
          />
          <path
              id="orange_1"
              class="cls-34"
              d="M396.909,228.952c111.911,0,212.629,47.606,229.169,115.472,19.27,79.068-85.494,150.425-225.217,150.425-139.785,0-246.6-71.391-229.688-150.425C185.681,276.624,284.878,228.952,396.909,228.952Z"
          />
          <image
              id="light_o_3"
              x="520"
              y="324"
              width="72"
              height="92"
              xlink:href="@/assets/images/center/light_0_3.png"
          />
          <image
              id="light_o_2"
              x="141"
              y="261"
              width="99"
              height="137"
              xlink:href="@/assets/images/center/light_0_2.png"
          />
          <image
              id="light_o_1"
              x="436"
              y="385"
              width="99"
              height="66"
              xlink:href="@/assets/images/center/light_0_1.png"
          />
        </g>
        <image
            id="center-houes"
            x="103"
            y="120"
            width="539"
            height="419"
            xlink:href="@/assets/images/center/house.png"
        />
        <g id="right">
          <g id="组_380" data-name="组 380">
            <path
                id="line_b_3"
                class="cls-35"
                d="M254.251,93.032s47.68,24.959,35.63,74.5,43.548,85.6,43.548,85.6"
            />
            <path
                id="line_b_2"
                class="cls-35"
                d="M122.023,310.584s19.568,33.927,95.014-1.189,85.512,3.963,85.512,3.963"
            />
            <path
                id="line_b_1"
                class="cls-35"
                d="M236.832,551.912s54.438-25.6,47.506-82.424,34.839-88.368,34.839-88.368"
            />
            <path
                id="line_o_3"
                class="cls-36"
                d="M558.295,108.09s-49.1,12.55-54.633,70.932-39.193,77.669-39.193,77.669"
            />

            <path
                id="line_o_2"
                class="cls-36"
                d="M653,387s-39.424,20.259-79-30-70.444-42.177-79-40"
            />
            <path
                id="line_o_1"
                class="cls-36"
                d="M505,579s-31.47-27.546-17-86c12.415-50.151-42-83-42-83"
            />

            <g id="dots_b">
              <circle
                  id="dots39"
                  class="cls-37"
                  cx="256.219"
                  cy="94.234"
                  r="2.781"
              />
              <path
                  id="dots38"
                  class="cls-38"
                  d="M331.062,248.777a2.766,2.766,0,1,1-2.765,2.766A2.766,2.766,0,0,1,331.062,248.777Z"
              />
              <path
                  id="dots37"
                  class="cls-38"
                  d="M120.828,306.621a2.781,2.781,0,1,1-2.781,2.781A2.781,2.781,0,0,1,120.828,306.621Z"
              />
              <circle
                  id="dots36"
                  class="cls-39"
                  cx="300.938"
                  cy="311.781"
                  r="2.781"
              />
              <circle
                  id="dots35"
                  class="cls-37"
                  cx="236.422"
                  cy="552.313"
                  r="2.766"
              />
              <path
                  id="dots34"
                  class="cls-38"
                  d="M318.391,380.34a2.766,2.766,0,1,1-2.782,2.765A2.773,2.773,0,0,1,318.391,380.34Z"
              />
              <image
                  id="dots28"
                  x="255"
                  y="91"
                  width="22"
                  height="23"
                  xlink:href="@/assets/images/center/dots28.png"
              />
              <circle
                  id="dots27"
                  class="cls-40"
                  cx="321.25"
                  cy="243.625"
                  r="2.375"
              />
              <circle
                  id="dots26"
                  class="cls-41"
                  cx="288"
                  cy="184.969"
                  r="2.375"
              />
              <circle
                  id="dots25"
                  class="cls-42"
                  cx="155.766"
                  cy="326.047"
                  r="2.359"
              />
              <circle
                  id="dots24"
                  class="cls-43"
                  cx="284.828"
                  cy="298.703"
                  r="2.359"
              />
              <path
                  id="dots23"
                  class="cls-44"
                  d="M255.547,537.652a2.375,2.375,0,1,1-2.375,2.375A2.375,2.375,0,0,1,255.547,537.652Z"
              />
              <path
                  id="dots22"
                  class="cls-45"
                  d="M285.641,479a2.375,2.375,0,1,1-2.375,2.375A2.375,2.375,0,0,1,285.641,479Z"
              />
              <circle
                  id="dots21"
                  class="cls-46"
                  cx="286.813"
                  cy="436.985"
                  r="2.375"
              />
              <circle
                  id="dots20"
                  class="cls-47"
                  cx="276.125"
                  cy="112.078"
                  r="1.594"
              />
              <path
                  id="dots19"
                  class="cls-48"
                  d="M291.578,149.308a1.579,1.579,0,1,1-1.594,1.578A1.587,1.587,0,0,1,291.578,149.308Z"
              />
              <path
                  id="dots18"
                  class="cls-49"
                  d="M306.625,226.965a1.594,1.594,0,1,1-1.578,1.593A1.585,1.585,0,0,1,306.625,226.965Z"
              />
              <circle
                  id="dots17"
                  class="cls-50"
                  cx="140.734"
                  cy="323.266"
                  r="1.578"
              />
              <circle
                  id="dots16"
                  class="cls-51"
                  cx="234.938"
                  cy="302.672"
                  r="1.594"
              />
              <circle
                  id="dots15"
                  class="cls-52"
                  cx="284.422"
                  cy="465.516"
                  r="1.578"
              />
              <circle
                  id="dots14"
                  class="cls-53"
                  cx="266.625"
                  cy="528.938"
                  r="1.594"
              />
              <circle
                  id="dots13"
                  class="cls-54"
                  cx="307.797"
                  cy="393.016"
                  r="1.578"
              />
            </g>
            <g id="dots_o">
              <path
                  id="dots33"
                  class="cls-55"
                  d="M555.906,103.715a2.766,2.766,0,1,1-2.765,2.765A2.765,2.765,0,0,1,555.906,103.715Z"
              />
              <path
                  id="dots32"
                  class="cls-55"
                  d="M466.437,252.34a2.766,2.766,0,1,1-2.765,2.765A2.765,2.765,0,0,1,466.437,252.34Z"
              />
              <circle
                  id="dots31"
                  class="cls-56"
                  cx="652.093"
                  cy="385.89"
                  r="2.781"
              />
              <path
                  id="dots30"
                  class="cls-55"
                  d="M494.937,312.558a2.766,2.766,0,1,1-2.765,2.766A2.766,2.766,0,0,1,494.937,312.558Z"
              />
              <circle
                  id="dots29"
                  class="cls-56"
                  cx="505.625"
                  cy="576.485"
                  r="2.781"
              />
              <circle
                  id="dots29-2"
                  data-name="dots29"
                  class="cls-56"
                  cx="446.25"
                  cy="409.64"
                  r="2.781"
              />
              <use id="dots12" x="516" y="118" xlink:href="#image"/>
              <use id="dots11" x="505" y="304" xlink:href="#image"/>
              <use id="dots10" x="572" y="353" xlink:href="#image"/>
              <use id="dots09" x="486" y="555" xlink:href="#image"/>
              <use id="dots08" x="479" y="465" xlink:href="#image"/>
              <use id="dots07" x="499" y="158" xlink:href="#image-2"/>
              <use id="dots06" x="483" y="221" xlink:href="#image-2"/>
              <use id="dots05" x="470" y="239" xlink:href="#image-2"/>
              <use id="dots04" x="632" y="383" xlink:href="#image-2"/>
              <use id="dots03" x="564" y="346" xlink:href="#image-2"/>
              <use id="dots02" x="455" y="415" xlink:href="#image-2"/>
              <use id="dots01" x="482" y="455" xlink:href="#image-2"/>
            </g>

            <!-- 开始给点制作动画特效 -->
            <template v-for="item in [1, 2, 3]">
              <circle class="cus-cls-blue" cx="0" cy="0" r="3">
                <animateMotion
                    dur="6s"
                    begin="0s"
                    repeatCount="indefinite"
                    rotate="auto"
                >
                  <mpath :href="`#line_b_${item}`"></mpath>
                </animateMotion>
              </circle>

              <circle class="cus-cls-blue" cx="0" cy="0" r="3">
                <animateMotion
                    dur="6s"
                    begin="-3s"
                    repeatCount="indefinite"
                    rotate="auto"
                >
                  <mpath :href="`#line_b_${item}`"></mpath>
                </animateMotion>
              </circle>
            </template>

            <!-- 橙色的点 -->
            <template v-for="item in [1, 2,  3]">
              <circle class="cus-cls-orange" cx="0" cy="0" r="3">
                <animateMotion
                    dur="6s"
                    begin="0s"
                    repeatCount="indefinite"
                    rotate="auto"
                >
                  <mpath :href="`#line_o_${item}`"></mpath>
                </animateMotion>
              </circle>

              <circle class="cus-cls-orange" cx="0" cy="0" r="3">
                <animateMotion
                    dur="6s"
                    begin="-3s"
                    repeatCount="indefinite"
                    rotate="auto"
                >
                  <mpath :href="`#line_o_${item}`"></mpath>
                </animateMotion>
              </circle>
            </template>

          </g>
        </g>
        <g id="text">
          <text
              id="text6"
              class="cls-57"
              transform="translate(179.049 154.026) scale(0.481 0.481)"
          >
            软讲工程
          </text>
          <text
              id="text5"
              class="cls-57"
              transform="translate(63.771 351.7) scale(0.481 0.481)"
          >
            资产评估
          </text>
          <text
              id="text4"
              class="cls-57"
              transform="translate(161.75 622.618) scale(0.481 0.481)"
          >
            财务管理
          </text>
          <text
              id="text3"
              class="cls-57"
              transform="translate(583.87 649.734) scale(0.481 0.481)"
          >
            金融学
          </text>
          <text
              id="text2"
              class="cls-57"
              transform="translate(719.835 441.012) scale(0.481 0.481)"
          >
            会计学
          </text>
          <text
              id="text1"
              class="cls-57"
              transform="translate(637.843 173.315) scale(0.481 0.481)"
          >
            贸易经济
          </text>
        </g>
      </g>
    </svg>


    <!-- 防烟花特效 -->
    <img class="lingxA" src="@/assets/images/ling/lingxA.png"/>
    <img class="lingxB" src="@/assets/images/ling/lingxB.png"/>
    <img class="lingxC" src="@/assets/images/ling/lingxC.png"/>
    <img class="lingxD" src="@/assets/images/ling/lingxD.png"/>
    <img class="lingxE" src="@/assets/images/ling/lingxE.png"/>
    <img class="lingxF" src="@/assets/images/ling/lingxF.png"/>

  </div>
</template>

<script setup>

import {onMounted} from 'vue';
import gsap from 'gsap'

onMounted(() => {
  let timeline = gsap.timeline()

  timeline.fromTo(
      ['#dongxiao'],
      // 0% 
      {
        duration: 1,
        scale: 0.7,
        y: 50

      },
      // 100%
      {
        duration: 1,
        scale: 1,
        y: 0
      })
      .fromTo(
          ['#center-houes'],  // document.querySelectorAll
          {
            duration: 1,
            scale: 0.6,
            transformOrigin: 'bottom',
            opacity: 0.7,
            y: 30
          },
          {
            duration: 1,
            scale: 1,
            transformOrigin: 'bottom',
            opacity: 1,
            y: 0
          },
          "-=1" // 提前一秒执行动画
      )


})
</script>

<style scoped>
.cls-1,
.cls-11,
.cls-12,
.cls-16,
.cls-17,
.cls-2,
.cls-21,
.cls-22,
.cls-26,
.cls-27,
.cls-31,
.cls-6,
.cls-7 {
  stroke: #fff;
}

.cls-1,
.cls-10,
.cls-11,
.cls-12,
.cls-15,
.cls-16,
.cls-17,
.cls-2,
.cls-20,
.cls-21,
.cls-22,
.cls-25,
.cls-26,
.cls-27,
.cls-30,
.cls-31,
.cls-5,
.cls-6,
.cls-7 {
  stroke-width: 3px;
}

.cls-1,
.cls-10,
.cls-11,
.cls-12,
.cls-13,
.cls-14,
.cls-15,
.cls-16,
.cls-17,
.cls-18,
.cls-19,
.cls-2,
.cls-20,
.cls-21,
.cls-22,
.cls-23,
.cls-24,
.cls-25,
.cls-26,
.cls-27,
.cls-28,
.cls-29,
.cls-3,
.cls-30,
.cls-31,
.cls-32,
.cls-33,
.cls-34,
.cls-35,
.cls-36,
.cls-38,
.cls-4,
.cls-44,
.cls-45,
.cls-48,
.cls-49,
.cls-5,
.cls-55,
.cls-6,
.cls-7,
.cls-8,
.cls-9 {
  fill-rule: evenodd;
}

.cls-1,
.cls-11,
.cls-16,
.cls-21,
.cls-26,
.cls-6 {
  opacity: 0.15;
}

.cls-1 {
  fill: url(#linear-gradient);
}

.cls-12,
.cls-13,
.cls-14,
.cls-17,
.cls-18,
.cls-19,
.cls-2,
.cls-22,
.cls-23,
.cls-24,
.cls-27,
.cls-28,
.cls-29,
.cls-3,
.cls-4,
.cls-7,
.cls-8,
.cls-9 {
  opacity: 0.3;
}

.cls-2 {
  fill: url(#linear-gradient-2);
}

.cls-3 {
  fill: url(#linear-gradient-3);
}

.cls-4 {
  fill: url(#linear-gradient-4);
}

.cls-10,
.cls-15,
.cls-20,
.cls-25,
.cls-30,
.cls-31,
.cls-32,
.cls-33,
.cls-34,
.cls-35,
.cls-36,
.cls-5 {
  fill: none;
}

.cls-10,
.cls-15,
.cls-20,
.cls-25,
.cls-30,
.cls-5 {
  stroke-dasharray: 12 12;
  opacity: 0.7;
}

.cls-5 {
  stroke: url(#linear-gradient-5);
}

.cls-6 {
  fill: url(#linear-gradient-6);
}

.cls-7 {
  fill: url(#linear-gradient-7);
}

.cls-8 {
  fill: url(#linear-gradient-8);
}

.cls-9 {
  fill: url(#linear-gradient-9);
}

.cls-10 {
  stroke: url(#linear-gradient-10);
}

.cls-11 {
  fill: url(#linear-gradient-11);
}

.cls-12 {
  fill: url(#linear-gradient-12);
}

.cls-13 {
  fill: url(#linear-gradient-13);
}

.cls-14 {
  fill: url(#linear-gradient-14);
}

.cls-15 {
  stroke: url(#linear-gradient-15);
}

.cls-16 {
  fill: url(#linear-gradient-16);
}

.cls-17 {
  fill: url(#linear-gradient-17);
}

.cls-18 {
  fill: url(#linear-gradient-18);
}

.cls-19 {
  fill: url(#linear-gradient-19);
}

.cls-20 {
  stroke: url(#linear-gradient-20);
}

.cls-21 {
  fill: url(#linear-gradient-21);
}

.cls-22 {
  fill: url(#linear-gradient-22);
}

.cls-23 {
  fill: url(#linear-gradient-23);
}

.cls-24 {
  fill: url(#linear-gradient-24);
}

.cls-25 {
  stroke: url(#linear-gradient-25);
}

.cls-26 {
  fill: url(#linear-gradient-26);
}

.cls-27 {
  fill: url(#linear-gradient-27);
}

.cls-28 {
  fill: url(#linear-gradient-28);
}

.cls-29 {
  fill: url(#linear-gradient-29);
}

.cls-30 {
  stroke: url(#linear-gradient-30);
}

.cls-31 {
  opacity: 0.1;
}

.cls-32,
.cls-33,
.cls-34 {
  stroke-width: 4px;
}

.cls-32 {
  stroke: url(#linear-gradient-31);
}

.cls-33 {
  stroke: url(#linear-gradient-32);
}

.cls-34 {
  stroke: url(#linear-gradient-33);
}

.cls-35 {
  stroke: #1374f1;
}

.cls-35,
.cls-36 {
  stroke-width: 2px;
  opacity: 0.8;
}

.cls-36 {
  stroke: #f97a00;
}

.cls-37,
.cls-38,
.cls-39 {
  fill: #0e68ff;
}

.cls-39 {
  opacity: 0.36;
}

.cls-40,
.cls-41,
.cls-42,
.cls-43,
.cls-44,
.cls-45,
.cls-46,
.cls-47,
.cls-48,
.cls-49,
.cls-50,
.cls-51,
.cls-52,
.cls-53,
.cls-54 {
  fill: #fff;
  opacity: 0.9;
  will-change: opacity;
}

/* 编写点的样式 */
.cus-cls-blue {
  /* 蓝色的点 */
  fill: #fff;
  opacity: 0.9;
  filter: url(#blue-filter-2);
  will-change: opacity;
}

/* 橙色的点 */
.cus-cls-orange {
  fill: #fff;
  opacity: 0.9;
  filter: url(#orange-filter-2);
  will-change: opacity;
}

.cls-40 {
  filter: url(#filter);
}

.cls-41 {
  filter: url(#filter-2);
}

.cls-42 {
  filter: url(#filter-3);
}

.cls-43 {
  filter: url(#filter-4);
}

.cls-44 {
  filter: url(#filter-5);
}

.cls-45 {
  filter: url(#filter-6);
}

.cls-46 {
  filter: url(#filter-7);
}

.cls-47 {
  filter: url(#filter-8);
}

.cls-48 {
  filter: url(#filter-9);
}

.cls-49 {
  filter: url(#filter-10);
}

.cls-50 {
  filter: url(#filter-11);
}

.cls-51 {
  filter: url(#filter-12);
}

.cls-52 {
  filter: url(#filter-13);
}

.cls-53 {
  filter: url(#filter-14);
}

.cls-54 {
  filter: url(#filter-15);
}

.cls-55,
.cls-56 {
  fill: #f97a00;
}

.cls-57 {
  font-size: 41.603px;
  fill: #338ed5;
  text-anchor: middle;
  font-family: "Source Han Sans CN";
}


/* ICON 的动画特效 */
#icon_star_guangzhou {
  animation: updown 2.2s ease-in infinite;
}

#icon_home_foshan {
  animation: updown 1.9s ease-in infinite;
}

#icon_location_zhongshan {
  animation: updown 2s ease-in infinite;
}

#icon_hot_zhuhai {
  animation: updown 2s ease-in infinite;
}

#icon_earth_dongguan {
  animation: updown 1.7s ease-in infinite;
}

#icon_pie_shenzhen {
  animation: updown 1.7s ease-in infinite;
}

@keyframes updown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/*
@keyframes updown {
  0%{
    transform: translateY(0);
  }

  50%{
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}
*/


/* 灯光特效 */
.cls-3,
.cls-4,
.cls-28,
.cls-29,
.cls-8,
.cls-9,
.cls-23,
.cls-24,
.cls-18,
.cls-19,
.cls-13,
.cls-14 {
  animation: lightEffect 3s linear infinite;
}

@keyframes lightEffect {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 烟花特效 */
.center-svg {
  position: relative;
}

/* 布局定位 */
.center .lingxA {
  position: absolute;
  top: 30%;
  left: 47%;
}

.center .lingxB {
  position: absolute;
  top: 35%;
  left: 58%;
}

.center .lingxC {
  position: absolute;
  top: 40%;
  left: 40%;
}

.center .lingxD {
  position: absolute;
  top: 28%;
  left: 41%;
}

.center .lingxE {
  position: absolute;
  top: 28%;
  left: 54%;
}

.center .lingxF {
  position: absolute;
  top: 40%;
  left: 53%;
}


/**======城市烟花特效=======*/
.center .lingxA {
  opacity: 0;
  animation: lingxA 2s linear infinite;
}

.center .lingxB {
  opacity: 0;
  animation: lingxB 2.2s linear infinite;
}

.center .lingxC {
  opacity: 0;
  animation: lingxC 1.7s linear infinite;
}

.center .lingxD {
  opacity: 0;
  animation: lingxC 2.7s linear infinite;
}

.center .lingxE {
  opacity: 0;
  animation: lingxB 1.2s linear infinite;
}

.center .lingxF {
  opacity: 0;
  animation: lingxA 1.4s linear infinite;
}

/* 向上移动的烟花 */
@keyframes lingxA {
  from {
    transform: translateY(0px);
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  to {
    transform: translateY(-160px);
    opacity: 0;
  }
}

@keyframes lingxB {
  from {
    transform: translateY(0px);
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  60%,
  to {
    transform: translateY(-120px);
    opacity: 0;
  }
}

@keyframes lingxC {
  from {
    transform: translateY(0px);
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  50%,
  to {
    transform: translateY(-90px);
    opacity: 0;
  }
}

/**======城市烟花特效=======*/


</style>
